<template>
  <div class="sas" ref="a">
    <div class="screening">
      <el-button
        :type="checked1 === index ? 'danger' : 'info'"
        v-for="(item, index) in screening"
        :key="index"
        @click="checkItem1(index)"
        >{{ item.name }}({{ item.num }})</el-button
      >
    </div>
    <div class="sorting">
      <el-button
        :type="checked2 === index ? 'danger' : 'info'"
        v-for="(item, index) in sorting"
        :key="index"
        @click="checkItem2(index)"
        >{{ item.name
        }}<span v-if="!item.isShang">降序<i class="el-icon-bottom"></i></span
        ><span v-else>升序<i class="el-icon-top"></i></span
      ></el-button>
    </div>
    <div>
      客户限制数量：<span class="red">{{ limitNum }}</span
      >/ <span class="red">无限制</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "ScreeningAndSorting",
  props: {
    limitNum: Number,
    screening: Array,
  },
  data() {
    return {
      sorting: [
        {
          name: "编号",
          isShang: false,
        },
        {
          name: "录入时间",
          isShang: false,
        },
        {
          name: "更新时间",
          isShang: false,
        },
      ],
      checked1: -1,
      checked2: -1,
      checkval: {
        orderField: "",
        orderRule: 0,
        type: "",
      },
    };
  },
  methods: {
    checkItem1(index) {
      console.log(index);
      this.checked1 = index;
      if (index === 0) {
        this.checkval.type = "已成交";
      } else if (index === 1) {
        this.checkval.type = "等待打款";
      } else if (index === 2) {
        this.checkval.type = "确定细节";
      } else if (index === 3) {
        this.checkval.type = "有意向";
      } else if (index === 4) {
        this.checkval.type = "潜在客户";
      }
      this.$emit("orderval", this.checkval);
    },
    checkItem2(index) {
      this.checked2 = index;

      if (index === 0) {
        if (this.sorting[0].isShang) {
          //升序
          (this.checkval.orderField = "customer_id"),
            (this.checkval.orderRule = 1);
        } else {
          //降序
          (this.checkval.orderField = "customer_id"),
            (this.checkval.orderRule = 2);
        }
      } else if (index === 1) {
        if (this.sorting[0].isShang) {
          //升序
          (this.checkval.orderField = "import_date"),
            (this.checkval.orderRule = 1);
        } else {
          //降序
          (this.checkval.orderField = "import_date"),
            (this.checkval.orderRule = 2);
        }
      } else {
        if (this.sorting[0].isShang) {
          //升序
          (this.checkval.orderField = "update_date"),
            (this.checkval.orderRule = 1);
        } else {
          //降序
          (this.checkval.orderField = "update_date"),
            (this.checkval.orderRule = 2);
        }
      }
      this.$emit("orderval", this.checkval);
      this.sorting.forEach((item) => {
        item.isShang = !item.isShang;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.sas {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 10px;
}
.red {
  color: red;
}
</style>